<template>
  <view class="main">
    <view class="video"> <video id="video" :src="viewMeta(this.currentVideoId)" autoplay enable-danmu danmu-btn controls></video></view>
    <view class="list">
      <uni-list>
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
          <uni-list-item
            :clickable="true"
            link
            :title="item.title"
            v-for="item in nodeList"
            :key="item.id"
            @click="currentVideoId = item.video"></uni-list-item>
        </scroll-view>
      </uni-list>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      courseId: 0,
      //节点列表
      nodeList: [],
      status: 'more',
      total: 0,
      statusText: { contentdown: '点击加载更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据了' },
      query: '',
      //课节查询表单
      courseNodeForm: {
        current: 1,
        size: 10,
      },
      //视频id
      currentVideoId: '',
    }
  },
  onLoad(options) {
    if (!options.id) {
      uni.switchTab({
        url: `index`,
      })
    }
    this.getNodeList(options.id)
  },
  methods: {
    getNodeList(courseId) {
      this.courseNodeForm.courseId = courseId
      this.$store.dispatch('courseNode/lookNode', this.courseNodeForm).then((response) => {
        this.nodeList = response.data
        this.currentVideoId = response.data[0].video
      })
    },
    //预览媒体
    viewMeta(id) {
      return `${process.env.VUE_APP_ORIGIN_API}fileService/file/downloadChunk?id=${id}`
    },
  },
}
</script>
<style lang="scss" scoped>
.video {
  width: 100%;
}
#video {
  width: 100%;
}
::v-deep.main {
  .list {
    .uni-list {
      .uni-scroll-view {
        height: 850rpx !important;
      }
    }
  }
}
</style>
